<template>
  <el-row class="elrow-text">
    算法名称
    <el-input
      v-model="inputValue"
      placeholder="请输入"
      style="width: 240px; margin: 0 10px 0 10px"
    />
    <el-button @click="queryValue">查询</el-button>
  </el-row>
  <div class="MarketCard">
    <div class="sceneCard" v-for="it in sharingList" :key="it.alsId">
      <el-checkbox
        v-model="it.ischecked"
        class="deleteIcon"
        @click="checkClick(it.ischecked, it.alsId)"
      />
      <el-row class="cardImg pointer">
        <el-col :offset="8" :span="8">
          <img
            :src="
              require('@/assets/images/AlgorithmMode/' +
                (it.showImage ?? 'defalt_img') +
                '.png')
            "
          />
        </el-col>
      </el-row>
      <!-- 标题 -->
      <el-row class="cardInfo">
        <el-col :span="24" class="textOverflow title col">
          {{ it.alsName }}
        </el-col>
      </el-row>
    </div>
  </div>
  <el-row class="row-button">
    <el-button type="primary" plain @click="cancellation">关闭</el-button>
    <el-button type="primary" plain @click="share">共享</el-button>
  </el-row>
</template>
  
<script setup>
import {
  onMounted,
  toRefs,
  ref,
  reactive,
  provide,
  inject,
  watch,
  onActivated,
} from "vue";
import { algorithmSharing, shareAlgorithms } from "@/services/algorithm";
import { ElMessage, ElMessageBox } from "element-plus";

const sharingDialog = inject("sharingDialog"); //接父组件的状态
const queryAlgorithmInfos = inject("queryAlgorithmInfos", () => {}); //接受父组件传递的方法
//取消方法
const cancellation = () => {
  sharingDialog.value = false;
  queryAlgorithmInfos();
};

const inputValue = ref(null); //输入的内容
const sharingList = ref([]); //数组
//复选框状态
const checkClick = (check) => {
  check = !check;
};
//查询方法
const queryValue = () => {
  inputValue.value;
  SharingData(inputValue.value);
};
// 共享算法
const share = () => {
  let list = [];
  for (let i = 0; i < sharingList.value.length; i++) {
    if (sharingList.value[i].ischecked) {
      list.push(sharingList.value[i].alsId);
    }
  }
  shareList(list);
};

//渲染
const SharingData = async (inputValue) => {
  sharingList.value = [];
  const respData = await algorithmSharing({ name: inputValue });
  for (let i = 0; i < respData.respData.dataList.length; i++) {
    respData.respData.dataList[i]["ischecked"] = false;
  }
  sharingList.value = respData.respData.dataList;
};

//共享发布
const shareList = (list) => {
  ElMessageBox.confirm("是否要共享", "共享", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const respData = await shareAlgorithms({ alsList: list });
      if (respData.respCode == 200) {
        ElMessage.success(respData.respMessage);
        SharingData(inputValue.value);
      } else {
        ElMessage.error(respData.respMessage);
      }
    })
    .catch(() => {});
};
//根据传递的状态来调用
watch(
  //监听数据回显
  () => sharingDialog.value,
  (n, o) => {
    if (n) {
      SharingData();
    }
  }
);

//调用
onMounted(() => {
  SharingData();
});
</script>
  
  <style lang="scss" scoped>
.MarketCard {
  width: 100%;
  height: calc(100% - 90px);
  overflow: auto;
}
@mixin translation {
  transition: box-shadow 0.6s ease 0s;
}
.sceneCard {
  width: 23%;
  padding: 5px;
  margin: 10px 10px 10px 10px;
  border-radius: 12px;
  border: solid 1px #dedede;
  position: relative;
  box-sizing: border-box;
  float: left;
  @include translation;
  &:hover {
    box-shadow: 0px 0px 12px #cdcdcd;
  }
  .cardInfo {
    padding: 0 15px;
    .title {
      text-align: center;
    }
    .col {
      padding: 5px 0;
      height: 35px;
    }
  }
  .deleteIcon {
    z-index: 2;
    position: absolute;
    right: 10px;
    top: 6px;
    width: 20px;
    transition: opacity 0.6s ease 0s;
  }
  .minWidth {
    min-width: 60px;
  }
  .displayFlex {
    display: flex;
  }
  img {
    width: 100px;
  }
  .tag {
    margin-right: 5px;
  }
  .textOverflow {
    overflow: hidden; // 超出内容隐藏
    text-overflow: ellipsis; // 用省略号来代表被隐藏掉的文本
    white-space: nowrap; // 强制文本在一行显示
  }
  .pointer {
    cursor: pointer;
    img {
      width: 100px;
      height: 100px;
    }
  }
  .parameter {
    width: 100%;
    height: 560px;
    overflow: auto;
  }
  .title-icon {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-si {
      font-size: 24px;
    }
  }
}

.row-button {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 0px);
}
.but {
  width: 160px;
}
.elrow-text {
  display: flex;
  align-items: center;
}
</style>